<!DOCTYPE html>
<style>
    :root {
        --primary-color: #0071e3;
        --text-color: #333;
        --bg-color: #f8f9fa;
        --card-bg: #fff;
        --border-radius: 16px;
        --shadow: 0 4px 20px rgba(0,0,0,0.08);
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .admin-quick-actions {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .apple-button {
        padding: 12px 16px;
        min-width: 80px;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        cursor: pointer;
        box-sizing: border-box;
        line-height: 1.5;
        height: auto;
        border-radius: var(--border-radius);
        background: var(--card-bg);
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        color: var(--text-color);
    }

    .apple-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .theme-switcher {
        z-index: 1;
    }

    .nav-right {
        z-index: 3;
        display: flex;
        gap: 12px;
    }

    .theme-switcher .apple-button {
        height: 44px;
    }

    .post-layout {
        display: grid;
        grid-template-columns: minmax(280px, 320px) minmax(600px, 1fr);
        gap: 2.5rem;
        max-width: 1200px;
        margin: 2rem auto;
        padding: 0 2rem;
        align-items: start;
    }

    .sidebar {
        position: sticky;
        top: 100px;
        height: calc(100vh - 140px);
        overflow-y: auto;
        background: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 1.5rem;
        box-shadow: var(--shadow);
        border: 1px solid rgba(0,0,0,0.08);
    }

    .post-container {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        padding: 2rem;
        box-shadow: var(--shadow);
        transition: var(--transition);
        margin-top: 1rem;
        max-width: 800px;
        width: 100%;
    }

    .post-header {
        margin-bottom: 1.8rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding-bottom: 1.2rem;
    }

    .post-header h1 {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
        line-height: 1.3;
        color: var(--text-color);
    }

    .post-meta {
        display: flex;
        gap: 1.5rem;
        color: #666;
        font-size: 0.9rem;
    }

    .post-content {
        line-height: 1.8;
        font-size: 1.1rem;
        color: var(--text-color);
        max-width: 720px;
        margin: 0 auto;
    }

    .post-content p {
        margin-bottom: 1.5rem;
    }

    .post-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }

    .recommended-posts {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 0.8rem;
    }

    .recommended-posts a {
        display: block;
        padding: 0.9rem 1.2rem;
        border-radius: 12px;
        background: rgba(var(--primary-color-rgb), 0.05);
        transition: var(--transition);
        color: var(--text-color);
        text-decoration: none;
    }

    .recommended-posts a:hover {
        background: rgba(0,113,227,0.1);
        transform: translateX(5px);
    }

    .post-views {
        font-size: 0.8rem;
        color: #666;
        margin-left: 0.5rem;
    }

    /* 深色主题样式 */
    .dark-theme {
        --primary-color: #2997ff;
        --text-color: #f5f5f7;
        --bg-color: #1d1d1f;
        --card-bg: rgba(30,30,30,0.95);
    }

    .dark-theme .sidebar {
        background: var(--card-bg);
        border-color: rgba(255,255,255,0.1);
    }

    .dark-theme .post-header {
        border-bottom-color: rgba(255,255,255,0.1);
    }

    .dark-theme .post-meta {
        color: rgba(255,255,255,0.7);
    }

    .dark-theme .recommended-posts a {
        background: rgba(var(--primary-color-rgb), 0.1);
        color: rgba(255,255,255,0.9);
    }

    .dark-theme .apple-button {
        background: rgba(30,30,30,0.9);
        color: rgba(255,255,255,0.9);
        border-color: rgba(255,255,255,0.1);
    }

    @media (max-width: 1024px) {
        .post-layout {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        .sidebar {
            position: static;
            height: auto;
            margin-bottom: 1.5rem;
        }
    }

    @media (max-width: 768px) {
        .post-layout {
            padding: 0 1rem;
        }
        .post-header h1 {
            font-size: 1.8rem;
        }
        .post-content {
            font-size: 1rem;
            padding: 0 1rem;
        }
        .post-container {
            padding: 1.5rem;
        }
    }
</style>

<html lang="zh" class="anime-style">

<head>
    <title>{{ post.title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body class="anime-style">
    <div class="anime-bg"></div>
    <header class="blog-header" style="position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.98); box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
        <div class="header-content">
            <a href="{{ url_for('posts.index') }}" class="apple-button">
                <i class="fas fa-arrow-left"></i> 返回首页
            </a>
            <div class="theme-switcher">
                <button id="theme-toggle" class="apple-button">
                    <i class="fas fa-moon"></i> 切换主题
                </button>
            </div>
            <nav>
                {% if session.get('logged_in') %}
                <div class="admin-quick-actions">
                    <a href="{{ url_for('admin.new_post') }}" class="apple-button">
                        <i class="fas fa-plus"></i> 新增
                    </a>
                    <a href="{{ url_for('posts.edit_post', slug=post.slug) }}" class="apple-button">
                        <i class="fas fa-edit"></i> 编辑
                    </a>
                    <a href="{{ url_for('admin.admin') }}" class="apple-button">
                        <i class="fas fa-cog"></i> 管理
                    </a>
                    <a href="{{ url_for('auth.admin_logout') }}" class="apple-button">
                        <i class="fas fa-sign-out-alt"></i> 登出
                    </a>
                </div>
                {% else %}
                <a href="{{ url_for('auth.admin_login') }}" class="apple-button">
                    <i class="fas fa-sign-in-alt"></i> 登录
                </a>
                {% endif %}
            </nav>
        </div>
    </header>
    <div class="post-layout">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3><i class="fas fa-fire"></i> 热门推荐</h3>
                <ul class="recommended-posts">
                    {% for post in recommended_posts %}
                    <li>
                        <a href="{{ url_for('posts.show_post', slug=post.slug) }}">
                            <span class="post-title">{{ post.title }}</span>
                            <span class="post-meta">
                                <i class="fas fa-eye"></i> {{ post.views|default(0) }}
                                <i class="fas fa-calendar-alt"></i> {{ post.date.strftime('%m/%d') }}
                            </span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </aside>

        <!-- 主内容区 -->
        <div class="post-container">
            <article class="post">
                <header class="post-header">
                    <h1>{{ post.title }}</h1>
                    <div class="post-meta">
                        <span class="meta-item">
                            <i class="fas fa-user"></i> 作者：管理员
                        </span>
                        <span class="meta-item">
                            <i class="fas fa-eye"></i> 浏览量：{{ post.views|default(0) }}
                        </span>
                        <span class="meta-item">
                            <i class="fas fa-calendar-alt"></i> 发布时间：{{ post.date.strftime('%Y年%m月%d日') }}
                        </span>
                        {% if post.modified_date %}
                        <span class="meta-item">
                            <i class="fas fa-sync-alt"></i> 最后修改：{{ post.modified_date.strftime('%Y年%m月%d日') }}
                        </span>
                        {% endif %}
                    </div>
                </header>

                <div class="post-content">
                    {{ post.html_content.replace('/static/uploads', url_for('static', filename='uploads'))|safe }}
                </div>

                <footer class="post-footer">
                    <div class="post-tags">
                        <i class="fas fa-tags"></i>
                        {% for tag in post.tags %}
                        <span class="tag">{{ tag }}</span>
                        {% endfor %}
                    </div>
                </footer>
            </article>
        </div>
        <script>
            // 主题切换功能
            const themeToggle = document.getElementById('theme-toggle');
            const body = document.body;

            // 检查本地存储的主题偏好
            if (localStorage.getItem('theme') === 'dark') {
                body.classList.add('dark-theme');
                themeToggle.innerHTML = '<i class="fas fa-sun"></i> 切换主题';
            }

            themeToggle.addEventListener('click', () => {
                body.classList.toggle('dark-theme');
                const isDark = body.classList.contains('dark-theme');
                localStorage.setItem('theme', isDark ? 'dark' : 'light');
                themeToggle.innerHTML = isDark
                    ? '<i class="fas fa-sun"></i> 切换主题'
                    : '<i class="fas fa-moon"></i> 切换主题';
            });
        </script>
</body>

</html>